﻿define(function (require, exports, module) {
    var Canvas = require('util/canvas');
    var ImageStorage = require('util/imageStorage');
    var Config = require('util/config');

    var m_boxSettings = [{
        options: { id: 1000, name: 'birthplace', x: 154, y: 108, width: 108, height: 22 },
        title: 'BIRTHPLACE_SACUN_TITLE', desc: 'BIRTHPLACE_SACUN_DESC'
    }, {
        options: { id: 2000, name: 'birthplace', x: 34, y: 150, width: 111, height: 22 },
        title: 'BIRTHPLACE_YUCUN_TITLE', desc: 'BIRTHPLACE_YUCUN_DESC'
    }, {
        options: { id: 3000, name: 'birthplace', x: 222, y: 198, width: 108, height: 22 },
        title: 'BIRTHPLACE_JIAJIA_TITLE', desc: 'BIRTHPLACE_JIAJIA_DESC'
    }, {
        options: { id: 4006, name: 'birthplace', x: 99, y: 258, width: 119, height: 22 },
        title: 'BIRTHPLACE_KALUTANA_TITLE', desc: 'BIRTHPLACE_KALUTANA_DESC'
    }];
    var m_confirmOptions = [{
        id: 'ok', x: 247, y: 240
    }, {
        x: 327, y: 240
    }];

    exports.renderAsync = eval(Wind.compile('async', function () {
        Canvas.clear();

        var bgLayer = Canvas.createLayer();
        var bgImage = $await(Canvas.createImageAsync({ image: Config.images.BIRTHPLACE_BG }));
        bgLayer.add(bgImage);
        Canvas.add(bgLayer);

        var operatingLayer = Canvas.createLayer();
        var titleImage = Canvas.createImage({ id: 'title', x: 442, y: 92, width: 79, height: 23, visible: false });
        operatingLayer.add(titleImage);

        var descImage = Canvas.createImage({ id: 'desc', x: 379, y: 127, width: 236, height: 116, visible: false });
        operatingLayer.add(descImage);

        for (var i = 0, setting; setting = m_boxSettings[i]; i++) {
            var rect = Canvas.createRectWithBoxAnimation(setting.options);
            var titleImg = $await(ImageStorage.getAsync(Config.images[setting.title]));
            var descImg = $await(ImageStorage.getAsync(Config.images[setting.desc]));
            rect.on('mouseover', (function (_titleImg, _descImg) {
                return function () {
                    titleImage.setAttrs({ image: _titleImg, visible: true });
                    descImage.setAttrs({ image: _descImg, visible: true });
                };
            })(titleImg, descImg));
            rect.on('mouseout', function () {
                titleImage.hide();
                descImage.hide();
                operatingLayer.draw();
            });
            rect.on('click', function () {
                var confirmGroup = Canvas.get('#confirmGroup')[0];
                confirmGroup.show();
                confirmGroup.getLayer().draw();
            });
            operatingLayer.add(rect);
        }

        var backRect = Canvas.createRectWithBoxAnimation({ id: 'back', x: 379, y: 263, width: 65, height: 66 });
        var descImg = $await(ImageStorage.getAsync(Config.images.BIRTHPLACE_BACK_DESC));
        backRect.on('mouseover', function () {
            descImage.setAttrs({ image: descImg, visible: true });
        });
        backRect.on('mouseout', function () {
            descImage.hide();
            operatingLayer.draw();
        });
        operatingLayer.add(backRect);
        Canvas.add(operatingLayer);

        var confirmLayer = Canvas.createLayer();
        var confirmGroup = Canvas.createGroup({ id: 'confirmGroup', visible: false });
        var confirmBgImage = $await(Canvas.createImageAsync({ image: Config.images.BIRTHPLACE_CONFIRM_BG }));
        confirmGroup.add(confirmBgImage);

        for (var i = 0, options; options = m_confirmOptions[i]; i++) {
            var rect = Canvas.createRectWithBoxAnimation($.extend({ width: 66, height: 22 }, options));
            rect.on('click', function () {
                confirmGroup.hide();
            });
            confirmGroup.add(rect);
        }
        confirmLayer.add(confirmGroup);

        var creatingMessageImage = $await(Canvas.createImageAsync({ id: 'creating', image: Config.images.BIRTHPLACE_CREATING_MESSAGE, visible: false }));
        confirmLayer.add(creatingMessageImage);

        var failureGroup = Canvas.createGroup({ id: 'failureGroup', visible: false });
        var failureMessageImage = $await(Canvas.createImageAsync({ image: Config.images.BIRTHPLACE_FAILURE_MESSAGE }));
        failureGroup.add(failureMessageImage);
        var okRect = Canvas.createRectWithBoxAnimation({ id: 'failure', x: 303, y: 250, width: 30, height: 18 });
        failureGroup.add(okRect);
        confirmLayer.add(failureGroup);

        Canvas.add(confirmLayer);
    }));
});